import React, { useState, useEffect } from 'react';
import Home from './children/home';
import Zhizuo from './children/zhizuo';
import Fabu from './children/fabu';
import { Switch, Route, Redirect } from 'react-router-dom'
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
} from '@ant-design/icons';
import { Button, Layout, Menu, theme } from 'antd';

const { Header, Sider, Content } = Layout;
import { useAppDispatch } from '../stores/getStateTs';
import { action_getlist,action_newgetlist } from '../stores/climary';

const Admin: React.FC = (props) => {
    let dispatch = useAppDispatch()
    useEffect(() => {
        dispatch(action_getlist())
        dispatch(action_newgetlist())
    }, [])
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    return (
        <Layout style={{ height: '100vh' }}>
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div className="demo-logo-vertical" />
                <Menu
                    theme="dark"
                    mode="inline"
                    defaultOpenKeys={['', props.location.pathname]}
                    defaultSelectedKeys={[props.location.pathname]}
                    items={[
                        {
                            key: '/admin/home',
                            icon: <UserOutlined />,
                            label: '首页',
                        },
                        {
                            key: '',
                            icon: <VideoCameraOutlined />,
                            label: '电子券管理',
                            children: [
                                {
                                    key: '/admin/zhizuo',
                                    icon: <UploadOutlined />,
                                    label: '优惠券制作',
                                },
                                {
                                    key: '/admin/fabu',
                                    icon: <UploadOutlined />,
                                    label: '已发布优惠券',
                                },
                            ]
                        },

                    ]}
                    onSelect={(obj) => {
                        props.history.push(obj.key)
                    }}
                />
            </Sider>
            <Layout>
                <Header style={{ padding: 0, background: colorBgContainer }}>
                    <Button
                        type="text"
                        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                        onClick={() => setCollapsed(!collapsed)}
                        style={{
                            fontSize: '16px',
                            width: 64,
                            height: 64,
                        }}
                    />
                </Header>
                <Content
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                        background: colorBgContainer,
                        borderRadius: borderRadiusLG,
                    }}
                >
                    <Switch>
                        <Route path='/admin/home' component={Home}></Route>
                        <Route path='/admin/zhizuo' component={Zhizuo}></Route>
                        <Route path='/admin/fabu' component={Fabu}></Route>
                        <Redirect from='/admin' to='/admin/home'></Redirect>
                    </Switch>
                </Content>
            </Layout>
        </Layout>
    );
};

export default Admin;